<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1> The Ajax 01 page</h1>
        <button onclick="doAjaxStart()">Ajax Get Resuest Start</button>
        <span id="result"></span>
    </div>
    <script>
        function doAjaxStart() {//js问题的调试-日志；debugger，排除法
            //console.log("===doAjaxStart()===")
            //debugger //在浏览器控制台打开状态下断点才会生效
            //1 create xhr对象
            let xhr=new XMLHttpRequest();
            //2 设置状态监听（监听客户端与服务端的通讯过程）
            xhr.onreadystatechange=function () {//此函数在客户端与服务端的通讯状态发生变化时执行
                if(xhr.readyState==4&&xhr.status==200){//4表示服务端响应到客户端，客户端已接收完成
                                                        //200 表示服务端处理请求的过程是OK的
                    let result =xhr.responseText;//表示服务端到客户端的文本信息
                    document.getElementById("result").innerHTML=result;
                }
            }
            //3 建立一个与服务端指定的url的链接
            let url ="http://localhost/doAjaxStart";
            xhr.open("Get",url,true);//true表示异步请求 false表示同步请求
            //4 发送请求
            xhr.send(null);//这个请求交给谁去发送？（ajax 引擎）
            console.log("===main===");

        }
    </script>
</body>
</html>